<template>
  <div class="w-full">
    新增角色
    <tiny-button @click="handleClick('role')">角色</tiny-button>
    <tiny-button @click="handleClick('home')">home</tiny-button>
    <tiny-form :model="gridProps.params" ref="formRef" @submit="handleSubmit">
      <tiny-form-item label="备注">
        <tiny-input
          v-model.lazy.trim="gridProps.params['remark-ct']"
          placeholder="请输入备注"
        ></tiny-input>
      </tiny-form-item>
    </tiny-form>
    <GridTable v-bind="gridProps" v-on="events" ref="gridTableRef"></GridTable>
    <Select
      ref="selectRef"
      v-model="value"
      v-bind="selectConfig"
      v-on="selectEvents"
      multiple
      click-expand
      isPager
    >
      <template #default></template>
    </Select>
    <Select ref="selectRef" v-model="value1" v-bind="selectConfig" v-on="selectEvents"> </Select>
    <!-- <Hello name="hello" /> -->
    <tiny-button @click="selectRef?.reload()">刷新</tiny-button>
  </div>
</template>

<script setup lang="tsx">
import { FileGroupApi } from '@/services/api/file-group';
import type { FileGroup } from '@/services/modules';
import { TinyActionMenu, TinyButton, TinySwitch } from '@opentiny/vue';
import { useRouter } from 'vue-router';
import { Hello } from './index';
import { reactive, ref } from 'vue';
import { TinyForm, TinyFormItem, TinyInput } from '@opentiny/vue';
const router = useRouter();
const gridTableRef = ref();
const formRef = ref<InstanceType<typeof TinyForm>>();
const value = ref([]);
const value1 = ref(null);
const handleSubmit = async () => {
  // gridTableRef.value?.handleFetch();
  gridTableRef.value.handleFetch('reload');
};

const selectConfig = ref({
  api: FileGroupApi,
  params: {},
  attr: {
    label: 'fileId',
    value: 'id',
    children: 'children',
  },
});
const selectEvents = {
  change: (e: any) => {
    console.log(e);
  },
};

const selectRef = ref();
const events = {
  // 'cell-click': (e: any) => {
  //   console.log(e);
  // },
  // 'scroll': (e: any) => {
  //   console.log(e);
  // },
  'select-change': (e: any) => {
    console.log(e);
  },
};
const handleClick = (name: string) => {
  router.push({ name });
};
const fun = new Function(
  'h',
  'row',
  `return h('span', {}, row.updateTime ? row.updateTime : '- -'); `
);
const tagFun = new Function(
  'h',
  'row',
  `return h('span', {title: row.tags}, row.tags ? JSON.parse(row.tags).join(',') : '- -'); `
);
const gridProps = reactive<GridOptions<FileGroup>>({
  api: FileGroupApi,
  params: {
    'remark-ct': '',
  },
  config: {
    columns: [
      {
        type: 'index', // 序号列
        width: 60,
        align: 'center',
        fixed: 'left',
      },
      {
        width: 60,
        type: 'selection',
      },
      // {
      //   type: 'checkbox',
      //   width: 60,
      //   align: 'center',
      // },
      {
        title: 'ID',
        field: 'id',
        width: 80,
        sortable: true,
        align: 'center',
      },
      {
        title: '备注',
        field: 'remark',
        showOverflow: 'tooltip',
        minWidth: 120,
        renderer(h, { row }) {
          // return h('span', { title: row.remark }, row.remark ? row.remark : '- -');
          return (
            <>
              <span title={row.remark}>{row.remark ? row.remark : '- -'}</span>
              <Hello name={row.remark} />
            </>
          );
        },
      },
      {
        title: '标签',
        field: 'tags',
        showOverflow: 'tooltip',
        minWidth: 150,
        renderer(h, { row }) {
          return tagFun(h, row);
        },
      },
      {
        title: '关联ID',
        field: 'ids',
        width: 180,
        showOverflow: 'title',
        renderer(h, { row }) {
          return h('span', {}, row.ids ? JSON.parse(row.ids).join(',') : '- -');
        },
      },
      {
        title: '类型',
        field: 'type',
        width: 100,
        align: 'center',
        renderer(h, { row }) {
          return h('span', {}, row.type === 2 ? '图片' : '文档');
        },
      },
      {
        title: '创建时间',
        field: 'createTime',
        width: 180,
        sortable: true,
        align: 'center',
      },
      {
        title: '更新时间',
        field: 'updateTime',
        width: 180,
        align: 'center',
        renderer(h, { row }) {
          return fun(h, row);
        },
      },
      {
        title: '状态',
        field: 'status',
        width: 100,
        align: 'center',
        renderer(h, { row }) {
          return h(TinySwitch, {
            props: {
              modelValue: row.status,
              trueValue: 1,
              falseValue: 0,
            },
          });
        },
      },
      {
        title: '文件组',
        field: 'fileGroup',
        width: 150,
        showOverflow: 'tooltip',
        renderer(h, { row }) {
          return h('span', {}, row.updateTime ? row.updateTime : '- -');
        },
      },
      {
        title: '文件ID',
        field: 'fileId',
        width: 200,
        showOverflow: 'tooltip',
      },
      {
        title: '操作',
        minWidth: 250,
        align: 'center',
        fixed: 'right',
        renderer: (h) => {
          return (
            <>
              <TinyActionMenu
                mode="card"
                options={[
                  {
                    label: '远程登陆',
                  },
                  {
                    label: '开机',
                    disabled: true,
                  },
                  {
                    label: '关机',
                  },
                  {
                    label: '重启',
                  },
                  {
                    label: '网络设置',
                    children: [
                      { label: '更改安全组', disabled: true },
                      { label: '切换 VPC', divided: true },
                    ],
                  },
                ]}
                onItemClick={(data: any) => {
                  console.log(data);
                }}
              >
                新增
              </TinyActionMenu>
            </>
          );
          // return h(TinyActionMenu, {
          //   props: {
          //     mode: 'card',
          //     options: [
          //       {
          //         label: '远程登陆',
          //       },
          //       {
          //         label: '开机',
          //         disabled: true,
          //       },
          //       {
          //         label: '关机',
          //       },
          //       {
          //         label: '重启',
          //       },
          //       {
          //         label: '网络设置',
          //         children: [
          //           { label: '更改安全组', disabled: true },
          //           { label: '切换 VPC', divided: true },
          //         ],
          //       },
          //     ],
          //   },
          //   on: {
          //     'item-click'(data: any) {
          //       console.log(data);
          //     },
          //   },
          // });
        },
      },
    ],
    sortMethod({
      order,
      property,
      data,
    }: {
      order: 'asc' | 'desc';
      property: string;
      data: FileGroup[];
    }) {
      console.log(order, property);
      return data;
    },
    data: [
      {
        id: 406,
        remark: '财富自由',
        tags: '["暗黑", "朋友圈背景", "朋友圈"]',
        ids: '["05e89af5-1131-44f4-9bd9-909b105fde84"]',
        type: 3,
        createTime: '2024-10-06',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '05e89af5-1131-44f4-9bd9-909b105fde84',
      },
      {
        id: 407,
        remark: '',
        tags: '["酷", "女", "朋友圈背景", "朋友圈", "眼神"]',
        ids: '["07653b3e-d5b4-45b4-846a-72dd0d80a1f4"]',
        type: 3,
        createTime: '2024-10-06',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '07653b3e-d5b4-45b4-846a-72dd0d80a1f4',
      },
      {
        id: 408,
        remark: '女生头像，女头',
        tags: '["手机壁纸"]',
        ids: '["08d28981-478d-4535-a15e-c3a55b012d4f"]',
        type: 2,
        createTime: '2024-10-03',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '08d28981-478d-4535-a15e-c3a55b012d4f',
      },
      {
        id: 409,
        remark: '女生头像，女头11',
        tags: '["二次元", "电脑壁纸", "壁纸"]',
        ids: '["0ae72797-fee4-4746-8d6c-16cde22d8724"]',
        type: 5,
        createTime: '2024-10-03',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '0ae72797-fee4-4746-8d6c-16cde22d8724',
      },
      {
        id: 410,
        remark: '美腿',
        tags: '["电脑壁纸", "女", "壁纸"]',
        ids: '["0e226ffe-ac60-4bb6-bafc-40c05ca3762c"]',
        type: 5,
        createTime: '2024-10-03',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '0e226ffe-ac60-4bb6-bafc-40c05ca3762c',
      },
      {
        id: 411,
        remark: null,
        tags: '[]',
        ids: '["0f08de0a-3ef6-4270-a08c-48eb54fe795a"]',
        type: 2,
        createTime: '2024-10-08',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '0f08de0a-3ef6-4270-a08c-48eb54fe795a',
      },
      {
        id: 412,
        remark: null,
        tags: '["朋友圈背景", "朋友圈", "文艺", "文字"]',
        ids: '["1064b8bb-ba5a-412a-a7c0-f6426a4a1bb8"]',
        type: 3,
        createTime: '2024-10-06',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '1064b8bb-ba5a-412a-a7c0-f6426a4a1bb8',
      },
      {
        id: 413,
        remark: null,
        tags: '["水墨画", "水墨", "古风"]',
        ids: '["14d14229-e6e0-4195-aa50-1b6e7a9f5e14"]',
        type: 2,
        createTime: '2024-10-06',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '14d14229-e6e0-4195-aa50-1b6e7a9f5e14',
      },
      {
        id: 414,
        remark: null,
        tags: '["手机壁纸"]',
        ids: '["1ba14f3d-0ded-41ca-bf98-54320f4c5c56"]',
        type: 2,
        createTime: '2024-10-03',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '1ba14f3d-0ded-41ca-bf98-54320f4c5c56',
      },
      {
        id: 415,
        remark: '营业中',
        tags: '["个性", "朋友圈", "朋友圈背景"]',
        ids: '["1dc13c20-7adf-4ac4-a010-386347a7be03"]',
        type: 3,
        createTime: '2024-10-06',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '1dc13c20-7adf-4ac4-a010-386347a7be03',
      },
      {
        id: 416,
        remark: null,
        tags: '["手机壁纸"]',
        ids: '["1efed8b7-6923-4ebc-b6f8-f332daf4b2eb"]',
        type: 1,
        createTime: '2024-10-03',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '1efed8b7-6923-4ebc-b6f8-f332daf4b2eb',
      },
      {
        id: 417,
        remark: '自由无价',
        tags: '["杂乱", "破烂", "创意"]',
        ids: '["21bdaece-7871-4783-9d8a-36f690e552bd"]',
        type: 3,
        createTime: '2024-10-06',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '21bdaece-7871-4783-9d8a-36f690e552bd',
      },
      {
        id: 418,
        remark: '搞钱要紧',
        tags: '["手机壁纸", "单色", "简单", "壁纸"]',
        ids: '["22188179-f907-4ab5-92fc-d31c8ac86eee"]',
        type: 2,
        createTime: '2024-10-06',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '22188179-f907-4ab5-92fc-d31c8ac86eee',
      },
      {
        id: 419,
        remark: '摸鱼',
        tags: '["摸鱼", "简单", "电脑壁纸"]',
        ids: '["28b2b8da-9b29-47de-bec7-3b0ac3058867"]',
        type: 5,
        createTime: '2024-10-06',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '28b2b8da-9b29-47de-bec7-3b0ac3058867',
      },
      {
        id: 420,
        remark: null,
        tags: '["水墨画", "水墨", "文字", "文艺", "壁纸"]',
        ids: '["28c2ee83-92d6-400b-a3f7-e53f945b0a64"]',
        type: 2,
        createTime: '2024-10-06',
        updateTime: null,
        status: 1,
        fileGroup: null,
        fileId: '28c2ee83-92d6-400b-a3f7-e53f945b0a64',
      },
    ],
  },
});
</script>

<style scoped></style>
